<template>
  <div id="stylistInfo">
    <div class="stylistInfoContent">
      <div class="worksDetailNavInfo">
        <div v-show="!sceneType"><p @click="handelBack()">名师推荐</p><span>&gt;</span><p>设计师详情</p></div>
        <div v-show="sceneType === 'teacher'"><p @click="handleSchool()">校企合作</p><span>&gt;</span><p>师徒制工作室详情</p></div>
        <div v-show="sceneType === 'enterprise'"><p @click="handleSchool()">校企合作</p><span>&gt;</span><p>创意机构详情</p></div>
        <div v-show="sceneType === 'megagame'"><p @click="handleMegagame()">技能大赛</p><span>&gt;</span><p>大赛工作室</p></div>
      </div>
      <div class="stylistInfoContentBox">
        <div class="stylistInfoTitle">
          <div class="stylistInfoTitleBack">
            <img src="../../assets/img/skillLift/stylist_back.png" alt="">
          </div>
          <div class="stylistInfoTitleTab">
            <img :src="$globalImageUrl + (stylistData.avatar || studioData.studioLogo || companyInfo.enterpriseLogo)" alt="">
            <h2>{{stylistData.userName || studioData.studioName || companyInfo.companyName}}</h2>
            <div class="btns">
              <span @click="getAttention()" class="btnsSpan" v-show="isAttention === 0">关注</span>
              <span @click="getAttention()" class="spanActive btnsSpan" v-show="isAttention === 1">已关注</span>
              <span @click="handleMessage()" class="btnsSpan">私信</span>
            <div class="specialHobby">擅长:
              <!-- <div class="specialHobbyItem">{{stylistData.adept ||  studioData.adept || companyInfo.adept}}</div> -->
              <div class="specialHobbyItem">{{stylistData.adept ||  studioData.designerGoodField || companyInfo.adept}}</div>
            </div>
            <div class="btnBox" v-show="sceneType === 'teacher' || sceneType === 'megagame'">
              <button class="btnDef" :class="{gray: studioApplyStatus !== 0}" @click="fetchJoinStudio()">{{studioApplyText}}</button>
            </div>
            <p style="text-align: center; padding-top: .1rem;" v-show="sceneType === 'enterprise'">{{companyInfo.contacts}} | {{companyInfo.phone}}</p>
            <div class="btnBox" v-show="sceneType === 'enterprise'">
              <button class="btnDef" :class="{gray: false}" @click="onCollaborat()">合作沟通</button>
            </div>
            <ul v-show="!sceneType">
              <li :class="{active: datumTabIndex === 0}" @click="onDatumTab(0)">个人资料 <span></span></li>
              <li :class="{active: datumTabIndex === 1}" @click="onDatumTab(1)">作品列表 <span></span></li>
              <li :class="{active: datumTabIndex === 2}" @click="onDatumTab(2)">获得成就 <span></span></li>
              <li :class="{active: datumTabIndex === 3}" @click="onDatumTab(3)">课程列表 <span></span></li>
            </ul>
            <ul v-show="sceneType === 'teacher'">
              <li :class="{active: datumTabIndex === 4}" @click="onDatumTab(4)">工作室信息 <span></span></li>
              <li :class="{active: datumTabIndex === 5}" @click="onDatumTab(5)">人员列表 <span></span></li>
              <li :class="{active: datumTabIndex === 1}" @click="onDatumTab(1)">作品列表 <span></span></li>
              <li :class="{active: datumTabIndex === 6}" @click="onDatumTab(6)">信息公告 <span></span></li>
            </ul>
            <ul v-show="sceneType === 'enterprise'">
              <li :class="{active: datumTabIndex === 7}" @click="onDatumTab(7)">企业信息 <span></span></li>
              <li :class="{active: datumTabIndex === 5}" @click="onDatumTab(5)">人员列表 <span></span></li>
              <li :class="{active: datumTabIndex === 1}" @click="onDatumTab(1)">优秀作品 <span></span></li>
              <li :class="{active: datumTabIndex === 2}" @click="onDatumTab(2)">获得成就 <span></span></li>
<!--              <li :class="{active: datumTabIndex === 8}" @click="onDatumTab(8)">招聘职位 <span></span></li>-->
            </ul>
            <ul v-show="sceneType === 'megagame'">
              <li :class="{active: datumTabIndex === 4}" @click="onDatumTab(4)">工作室信息 <span></span></li>
              <li :class="{active: datumTabIndex === 5}" @click="onDatumTab(5)">导师列表 <span></span></li>
              <li :class="{active: datumTabIndex === 1}" @click="onDatumTab(1)">参赛作品 <span></span></li>
              <li :class="{active: datumTabIndex === 2}" @click="onDatumTab(2)">获奖作品 <span></span></li>
              <li :class="{active: datumTabIndex === 6}" @click="onDatumTab(6)">信息公告 <span></span></li>
            </ul>
          </div>
        </div>
        <div class="stylistInfoCenter">
          <!-- 个人资料 -->
          <div class="stylistInfoPersonalInfo" v-show="datumTabIndex === 0">
            <!-- <div class="stylistInfoPersonalInfoLeft stylistInfoPersonalInfoCommon"> -->
              <!-- <ul>
                <li><p>用户名</p></li>
                <li><p>性别</p></li>
                <li><p>现居住地</p></li>
                <li><p>意向合作院校</p></li>
                <li><p>联系方式</p></li>
                <li><p>详细介绍</p></li>
                <li><p>个人视频</p></li>
              </ul> -->
            <!-- </div> -->
            <div class="stylistInfoPersonalInfoRight stylistInfoPersonalInfoCommon">
              <ul >
                <li><p>用户名：{{stylistData.userName}}</p></li>
                <li><p>性别：{{stylistSex}}</p></li>
                <li><p>现居住地：{{stylistData.address}}</p></li>
                <li><p>意向合作院校：{{stylistData.schoolName}}</p></li>
                <li><p>联系方式：{{stylistData.phone}}</p></li>
                <li><p>详细介绍：{{stylistData.introduce}}</p></li>
                <li><p>个人视频：</p><video  v-show="stylistData.videoUrl" controls :src="$globalImageUrl + stylistData.videoUrl"></video></li>
              </ul>
            </div>
          </div>
          <!-- 作品列表 || 优秀作品 -->
          <div class="stylistInfoWorksList stylistInfoList" v-show="datumTabIndex === 1">
            <ul v-show="!sceneType">
              <li v-for="(item, index) in stylistWorkDara" :key="index" @click="jumpTo('/worksDetail?worksId=' + item.id)">
                <img :src="$globalImageUrl + item.literatureImg" alt="">
                <p class="ellipse">{{item.literatureName}}</p>
              </li>
            </ul>
            <ul v-show="sceneType === 'teacher' || sceneType === 'megagame'">
              <li v-for="(item, index) in studioWork" :key="index" @click="jumpTo('/worksDetail?sceneType=masterStudio&worksId=' + item.id)">
                <img :src="$globalImageUrl + item.awardWorkImg" alt="">
                <p class="ellipse">{{item.awardWorkName}}</p>
              </li>
            </ul>
            <ul v-show="sceneType === 'enterprise'">
              <li v-for="(item, index) in companyWork" :key="index" @click="jumpTo('/worksDetail?sceneType=ideaCompany&worksId=' + item.id)">
                <img :src="$globalImageUrl + item.literatureImg" alt="">
                <p class="ellipse">{{item.literatureName}}</p>
              </li>
            </ul>
          </div>
          <!-- 获得成就 || 获奖作品 -->
          <div class="stylistInfoAchievementList stylistInfoList" v-show="datumTabIndex === 2">
            <ul v-show="!sceneType">
              <li v-for="(item, index) in stylistAchieve" :key="index">
                <img :src="$globalImageUrl + item.image" alt="">
                <p class="ellipse">{{item.title}}</p>
              </li>
            </ul>
            <ul v-show="sceneType === 'megagame'">
              <li v-for="(item, index) in studioPrizeWork" :key="index" @click="jumpTo('/worksDetail?sceneType=acquirePrize&worksId=' + item.id)">
                <img :src="$globalImageUrl + item.awardWorkImg" alt="">
                <p class="ellipse">{{item.awardWorkName}}</p>
              </li>
            </ul>
            <ul v-show="sceneType === 'enterprise'">
              <li v-for="(item, index) in companyAchieve" :key="index">
                <img :src="$globalImageUrl + item.image" alt="">
                <p class="ellipse">{{item.title}}</p>
              </li>
            </ul>
          </div>
          <!-- 课程列表 -->
          <div class="stylistInfoCourseList stylistInfoList" v-show="datumTabIndex === 3">
            <ul>
              <li v-for="(item, index) in stylistCourseList" :key="index">
                <img :src="$globalImageUrl + item.courseImg" alt="">
                <div style="padding: .05rem;">
                  <h2>{{item.courseName}}</h2>
                  <span>{{item.introduce}}</span>
                  <p>￥{{item.presentPrice}}<sub>￥{{item.originalPrice}}</sub><button class="fr" @click="jumpTo('/courseDetail?id=' + item.id)">立刻报名</button></p>
                </div>
              </li>
            </ul>
          </div>
          <!-- 工作室信息 -->
          <div class="stylistInfoWorkRoom" v-show="datumTabIndex === 4">
            <div class="stylistInfoWorkRoomBox">
              <p><span>主办人：{{studioData.sponsor}}</span></p>
              <p><span>联系电话：{{studioData.contactPhone}}</span></p>
              <p><span>介绍：{{studioData.introduce}}</span></p>
            </div>
          </div>
          <!-- 人员列表,只显示导师，并且点击不进去二级页面 -->
          <div class="stylistInfoPeopleList stylistInfoList" v-show="datumTabIndex === 5">
            <ul v-show="sceneType === 'megagame'">
              <!-- <li v-for="(item, index) in studioCrew" :key="index" @click="toPersonage(item.userId)"> -->
              <li v-for="(item, index) in studioCrew" :key="index" >
              <!-- <li v-for="(item, index) in studioCrew" :key="index" > -->
                <img :src="$globalImageUrl + item.avatar" alt="">
                <p class="ellipse">{{item.userName}}</p>
              </li>
            </ul>
            <ul v-show="sceneType === 'teacher'">
              <li v-for="(item, index) in studioCrew" :key="index" @click="toStylistInfo(item.userId)">
                <img :src="$globalImageUrl + item.avatar" alt="">
                <p class="ellipse">{{item.userName}}</p>
              </li>
            </ul>
            <ul v-show="sceneType === 'enterprise'">
              <!-- <li v-for="(item, index) in companyCrew" :key="index" @click="toStylistInfo(item.userId)">
                <img :src="$globalImageUrl + item.avatar" alt="">
                <p class="ellipse">{{item.userName}}</p>
              </li> -->
              <li class="infoList" v-for="(item, index) in companyCrew" :key="index" @click="toStylistInfo(item.userId)">
                <div class="infoImg">
                  <div class="infoImgFlex">
                    <img :src="$globalImageUrl + item.avatar" alt="">
                    <div>
                      <div>
                        <span>{{item.userName}}</span>
                        <!-- <span class="infoImgFlexText"> 负责设计师</span> -->
                      </div>
                      <div style="font-size:14px;color:#BEC1C3;margin-bottom:.1rem">
                        {{item.city}} | 网页设计师
                      </div>
                      <div>
                        <span>创作</span>
                        <span></span>
                        <!-- <span>粉丝</span> -->
                        <!-- <span></span> -->
                      </div>
                    </div>
                  </div>
                  <!-- <div class="infoImgBtn">关注</div> -->
                </div>
                <div class="production">
                  <img  v-for="(item, i) in item.literatureList" :key="i" :src="item.literatureImg" alt="">
                </div>
              </li>
            </ul>
          </div>
          <!-- 信息公告 -->
          <div class="stylistInfoBulletin" v-show="datumTabIndex === 6">
            <ul v-show="sceneType === 'teacher' || sceneType === 'megagame'">
              <li v-for="(item, index) in studioNotice" :key="index" @click="jumpTo('/newsDetail?sceneType=studioNews&id=' + item.id)">
                <div class="newsListViewImg">
                  <h2>{{item.createTime.slice(8, 10)}}</h2>
                  <span>{{item.createTime.slice(0, 7)}}</span>
                </div>
                <div class="newsListViewInfo newsListViewInfo2">
                  <h2>{{item.title}}</h2>
                  <img src="../../assets/img/login/icon_right.png" alt="">
                </div>
              </li>
            </ul>
          </div>
          <!-- 企业信息 -->
          <div class="stylistInfoEnterprise" v-show="datumTabIndex === 7">
            <div style="color:#15A29C">企业介绍：</div>
            <div v-html="companyInfo.introduce"></div>
            <div style="color:#15A29C">企业风采：</div>
            <div v-html="companyInfo.content"></div>
          </div>
          <!-- 招聘职位 -->
          <div class="stylistInfoRecruit" v-show="datumTabIndex === 8">
            我是职位
          </div>
        </div>
        <div class="stylistInfoSameRecommend" v-show="!this.sceneType">
          <h2>同类设计师推荐</h2>
          <div style="padding: .2rem;">
            <ul>
              <li v-for="(item, index) in stylistRecommend" :key="index" @click="toStylistInfo(item.userId)">
                <img :src="$globalImageUrl + item.avatar" alt="">
                <p class="ellipse">{{item.userName}}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="stylistInfoSameRecommend" v-show="sceneType === 'enterprise'">
          <h2>同类企业推荐</h2>
          <ul>
            <li v-for="(item, index) in companyRecommend" :key="index" @click="toEnterprise(item.id)">
              <img :src="$globalImageUrl + item.enterpriseLogo" alt="">
              <p class="ellipse">{{item.companyName}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 蒙层 -->
    <div class="message" v-show="isMessage">
      <div class="messageBox">
        <div class="messageTitle">站内信</div>
        <div>
          <textarea v-model="value" cols="30" rows="10"></textarea>
        </div>
        <span class="messageBtn sureBtn" @click="sureMessage()">确认</span>
        <span class="messageBtn" @click="handleMessage()">取消</span>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import store from '@/store'
export default {
  name: 'stylistInfo',
  data () {
    return {
      datumTabIndex: 0, // 0.个人资料 1.作品列表 2.获得成就 3.课程列表 4.工作室信息 5.人员列表 6.信息公告 7.企业信息 8.招聘职位
      sceneType: this.$route.query.sceneType,
      stylistUserId: this.$route.query.stylistUserId,
      stylistData: {},
      stylistWorkDara: {},
      stylistCourseList: [],
      stylistRecommend: [],
      stylistAchieve: [],
      studioId: this.$route.query.studioId,
      studioData: {},
      studioApplyStatus: 0, // 0 未加入 1 审核中 2 已加入
      studioCrew: [],
      studioWork: [],
      studioPrizeWork: [],
      studioNotice: [],
      companyId: this.$route.query.companyId,
      companyInfo: {},
      companyCrew: [],
      companyWork: [],
      companyRecommend: [],
      companyAchieve: [],
      isAttention: 0,
      userId: '',
      id: this.$route.query.uId,
      isMessage: false,
      value: '',
      type: ''
    }
  },
  computed: {
    studioApplyText () {
      let text = '申请加入'
      if (this.studioApplyStatus === 0) {
        text = '申请加入'
      } else if (this.studioApplyStatus === 1) {
        text = '审核中'
      } else if (this.studioApplyStatus === 2) {
        text = '已加入'
      } else {
        text = '申请加入'
      }
      return text
    },
    stylistSex () {
      let text = ''
      if (this.stylistData.sex === 0) {
        text = '女'
      } else if (this.stylistData.sex === 1) {
        text = '男'
      } else if (this.stylistData.sex === 2) {
        text = '保密'
      }
      return text
    }
  },
  created () {
    if (!this.sceneType) {
      this.datumTabIndex = 0
      this.fetchDesignerInfo()
      this.fetchDesignerLiter()
      this.fetchCourseByCreateId()
      this.fetchSameDesigner()
      this.fetchAchieve()
    } else if (this.sceneType === 'teacher' || this.sceneType === 'megagame') {
      this.datumTabIndex = 4
      this.fetchStudioInfo()
      this.fetchJoinStudioStatus()
      this.fetchStudioUser()
      this.fetchStudioWork()
      this.fetchPrizeWork()
      this.fetchStudioNews()
    } else if (this.sceneType === 'enterprise') {
      this.datumTabIndex = 7
      this.fetchEnterprise()
      this.fetchEnterpriseUser()
      this.fetchEnterpriseWork()
      this.fetchSameEnterprise()
      this.fetchEnterAchieve()
    }
    this.getIsAttention()
  },
  // watch: {
  //   '$route' (to, from) {
  //     console.log(to, from)
  //   }
  // },
  methods: {
    // 发私信
    sureMessage () {
      if (this.userId == '') {
        this.$vux.toast.text('请先登录')
        return
      }
      console.log(this.desUserId)
      this.$api.PostPrivateLetter({
        messageContent: this.value,
        sender: this.userId,
        // receiver: this.desUserId
        receiver: this.id
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$vux.toast.text('发送成功')
          setTimeout(() => {
            this.handleMessage()
            this.value = ''
          }, 500)
        }
      })
    },
    // 显示/隐藏蒙层
    handleMessage () {
      this.isMessage = !this.isMessage
    },
    // 是否关注
    getIsAttention () {
      // if (!this.sceneType) {
      //   this.desUserId = this.stylistUserId
      // } else if (this.sceneType === 'teacher' || this.sceneType === 'megagame') {
      //   this.desUserId = this.studioId
      // } else if (this.sceneType === 'enterprise') {
      //   this.desUserId = this.companyId
      // }
      if (!this.sceneType) {
        this.id = this.stylistUserId
        this.type = 1
      } else if (this.sceneType === 'enterprise') {
        this.type = 1
      } else if (this.sceneType === 'teacher' || this.sceneType === 'megagame') {
        this.id = this.studioId
        this.type = 2
      }
      let userId = store.state.user.userId
      this.userId = userId
      this.$api.getIsAttention({
        desUserId: this.id,
        userId,
        type: this.type
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.isAttention = res.data
        }
      })
    },
    // 关注、取消关注
    getAttention () {
      if (this.userId == '') {
        this.$vux.toast.text('请先登录')
        return
      }
      if (this.isAttention === 0) {
        this.$api.getAddAttention({
          desUserId: this.id,
          userId: this.userId,
          type:this.type
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            // this.getIsAttention()
            this.isAttention = 1
          }
        })
      } else if (this.isAttention === 1) {
        this.$api.getDelAttention({
          desUserId: this.id,
          userId: this.userId,
          type: this.type
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            // this.getIsAttention()

            this.isAttention = 0
          }
        })
      }
    },
    // 锚点跳转
    handelBack () {
      if (!this.sceneType) {
        this.$router.push('/teacherRecommend')
      }
    },
    // 锚点跳转回技能大赛
    handleMegagame () {
      this.$router.push('/megagame')
    },
    // 锚点跳转回校企合作
    handleSchool () {
      this.$router.push('/teamwork')
    },
    // 跳转到设计师页
    toStylistInfo (id) {
      this.onOpenExternalLink(`${this.$globalLinkUrl}#/stylistInfo?stylistUserId=` + id)
    },
    // 跳转到企业
    toEnterprise (id) {
      this.onOpenExternalLink(`${this.$globalLinkUrl}#/stylistInfo?sceneType=enterprise&companyId=` + id)
    },
    // 跳转到工作室
    // toMegagame (id) {
    //   this.onOpenExternalLink(`${this.$globalLinkUrl}#/stylistInfo?sceneType=megagame&studioId=` + id)
    // },
    // 跳转到个人主页
    toPersonage (userId) {
      this.onOpenExternalLink(`${this.$globalLinkUrl}#/stylistInfo?stylistUserId=` + userId)
    },
    onDatumTab (val) {
      this.datumTabIndex = val
    },
    // 合作沟通
    onCollaborat () {
      this.$vux.confirm.show({
        title: '提示',
        content: '手机号：' + this.companyInfo.phone + '<br/>邮箱：' + this.companyInfo.email
      })
    },
    // 获取设计师信息
    fetchDesignerInfo () {
      this.$api.getDesignerInfo({
        userId: this.stylistUserId
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          console.log(res)
          this.stylistData = res.data
        }
      })
    },
    // 获取设计师作品列表
    fetchDesignerLiter () {
      this.$api.getDesignerLiter({
        userId: this.stylistUserId,
        pageNum: 1
      }).then(res => {
        if (res.code === 0) {
          this.stylistWorkDara = res.data
        }
      })
    },
    // 获取课程列表
    fetchCourseByCreateId () {
      this.$api.getCourseByCreateId({
        userId: this.stylistUserId
      }).then(res => {
        if (res.code === 0) {
          this.stylistCourseList = res.data
        }
      })
    },
    // 同类设计师推荐
    fetchSameDesigner () {
      this.$api.getSameDesigner({
        userId: this.stylistUserId
      }).then(res => {
        if (res.code === 0) {
          this.stylistRecommend = res.data.splice(0, 6)
        }
      })
    },
    // 获取师徒制工作室信息
    fetchStudioInfo () {
      this.$api.getStudioInfo({
        id: this.studioId
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.studioData = res.data
        }
      })
    },
    // 判断是否加入工作室
    fetchJoinStudioStatus () {
      this.$api.getJoinStudioStatus({
        userId: this.$store.state.user.userId,
        studioId: this.studioId
      }).then(res => {
        if (res.code === 0) {
          this.studioApplyStatus = res.data.status
        }
      })
    },
    // 加入工作室
    fetchJoinStudio () {
      if (this.studioApplyStatus === 1) {
        return
      }
      this.$api.getJoinStudio({
        userId: this.$store.state.user.userId,
        studioId: this.studioId
      }).then(res => {
        if (res.code === 0) {
          this.studioApplyStatus = 1
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 获取人员列表
    fetchStudioUser () {
      this.$api.getStudioUser({
        id: this.studioId,
        pageNum: 1
      }).then(res => {
        if (res.code === 0) {
          console.log(res)
          this.studioCrew = res.data
          console.log(this.studioCrew)
        }
      })
    },
    // 获取参赛作品
    fetchStudioWork () {
      this.$api.getStudioWork({
        id: this.studioId,
        pageNum: 1,
        type: this.sceneType === 'teacher' ? 3 : 1 // 场景 3 师徒制工作室 1 大赛工作室
      }).then(res => {
        if (res.code === 0) {
          this.studioWork = res.data
        }
      })
    },
    // 获取获奖作品
    fetchPrizeWork () {
      this.$api.getPrizeWork({
        id: this.studioId,
        pageNum: 1,
        type: 2 // 场景 3 师徒制工作室 1 大赛工作室
      }).then(res => {
        if (res.code === 0) {
          this.studioPrizeWork = res.data
        }
      })
    },
    // 获取信息公告
    fetchStudioNews () {
      this.$api.getStudioNews({
        id: this.studioId,
        pageNum: 1
      }).then(res => {
        if (res.code === 0) {
          this.studioNotice = res.data
        }
      })
    },
    // 获取企业信息
    fetchEnterprise () {
      this.$api.getEnterprise({
        id: this.companyId
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.companyInfo = res.data
        }
      })
    },
    // 获取企业人员列表
    fetchEnterpriseUser () {
      this.$api.getEnterpriseUser({
        id: this.companyId
      }).then(res => {
        if (res.code === 0) {
          this.companyCrew = res.data
          console.log(res.data)
        }
      })
    },
    // 获取企业作品列表
    fetchEnterpriseWork () {
      this.$api.getEnterpriseWork({
        id: this.companyId
      }).then(res => {
        if (res.code === 0) {
          this.companyWork = res.data
        }
      })
    },
    // 获取同类企业推荐
    fetchSameEnterprise () {
      this.$api.getSameEnterprise({
        id: this.companyId
      }).then(res => {
        if (res.code === 0) {
          this.companyRecommend = res.data
        }
      })
    },
    // 获取企业成就列表
    fetchEnterAchieve () {
      this.$api.getEnterAchieve({
        id: this.companyId
      }).then(res => {
        if (res.code === 0) {
          this.companyAchieve = res.data
        }
      })
    },
    // 获取设计师成就列表
    fetchAchieve () {
      this.$api.getAchieve({
        userId: this.stylistUserId
      }).then(res => {
        if (res.code === 0) {
          this.stylistAchieve = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#stylistInfo{
  .message{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    padding-top: 200px;
    .messageBox{
      width: 600px;
      height: 400px;
      border-radius: 10px;
      background-color: #fff;
      position: absolute;
      // top: 200px;
      left: 0;
      right: 0;
      margin: 0 auto;
      text-align: center;
      .messageTitle{
        height: 60px;
        border-radius: 10px 10px 0 0;
        color: #fff;
        line-height: 60px;
        background-color: #00918A;
        // left: 50px;
      }
      .messageBtn{
        display: inline-block;
        width: 100px;
        height: 40px;
        border: 1px solid #aaaaaa;
        border-radius: 10px;
        line-height: 40px;
        margin-top: 30px;
      }
      .sureBtn{
        background-color: #00918A;
        color: #fff;
        margin-right: 50px;
      }
      div{
        textarea{
          margin-top: 20px;
          border: 1px solid #b4b4b4;
          border-radius: 10px;
          width: 80%;
          padding: 10px;
        }
      }
    }
  }
  .stylistInfoContent{
    width: 1200px;
    margin: auto;
    padding: .2rem 0;
    .stylistInfoContentBox{
      .stylistInfoTitle{
        .stylistInfoTitleBack{
          width: 100%;
          height: 1.66rem;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .stylistInfoTitleTab{
          width: 100%;
          background-color: #fff;
          position: relative;
          img{
            width: 1rem;
            height: 1rem;
            display: inline-block;
            border-radius: 500px;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, -50%);
          }
          h2{
            font-size: .2rem;
            font-weight: bold;
            color: #333;
            line-height: .28rem;
            text-align: center;
            padding-top: .6rem;
          }
          .btns{
            text-align: center;
            .btnsSpan{
              display: inline-block;
              width: 100px;
              border: 1px solid #e3e3e3;
              border-radius: 5px;
              margin-top: 10px;
            }
            .spanActive{
              background-color: #00A59D;
              color: #fff;
            }
          .specialHobby{
            text-align: center;
            display: flex;
            // align-items: center;
            justify-content: center;
            font-size: .1rem;
            font-weight: bold;
            margin-top: .05rem;
            .specialHobbyItem{
              color:#999;
              font-size: .06rem;
              margin-left: 8px;
            }
            .specialHobbyItem +.specialHobbyItem{
            }
          }
          .btnBox{
            margin-top: .2rem;
            text-align: center;
            .btnDef{
              width: 1.5rem;
              margin: auto;
              font-size: .14rem;
              line-height: .3rem;
            }
            .gray {
              background-color: #f3f3f3;
              color: #666;
              border: 1px solid #f3f3f3
            }
          }
          ul{
            text-align: center;
            padding: .3rem 0;
            padding-bottom: .2rem;
            li{
              font-size: .2rem;
              font-weight: 500;
              color: #333;
              line-height: .28rem;
              display: inline-block;
              padding: 0 .2rem;
            }
            li.active{
              color: #15A29C;
              position: relative;
              span{
                width: .4rem;
                height: .04rem;
                display: inline-block;
                background-color: #15A29C;
                position: absolute;
                left: 50%;
                bottom: -.08rem;
                transform: translateX(-50%);
              }
            }
          }
        }
      }
      .stylistInfoCenter{
        margin-top: .2rem;
        background-color: #fff;
        .stylistInfoPersonalInfo{
          // display: flex;
          // justify-content: space-between;
          flex-wrap: nowrap;
          padding: .2rem 0;
          .stylistInfoPersonalInfoCommon {
            width: 50%;
            padding-right: .2rem;
            margin-left: 5rem;
            ul{
              margin-left: -120px;
              li{
                padding-bottom: .1rem;
                p{
                  // height: .28rem;
                  font-size: .2rem;
                  font-weight: 500;
                  color: #333;
                  // line-height: .28rem;
                }
                video {
                  width: 5rem; height: 3rem
                }
              }
            }
          }
          .stylistInfoPersonalInfoLeft{
            // text-align: right;
          }
          .stylistInfoPersonalInfoRight{
            // text-align: left;
          }
        }
        .stylistInfoList{
          ul{
            padding: .2rem;
            li:nth-child(5n) {
              margin-right: 0;
            }
            li:nth-last-child(-n + 5) {
              margin-bottom: 0;
            }
            .infoList{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: .3rem 0;
              margin-bottom: .2rem !important;
              .infoImg{
                width: 3rem;
                display: flex;
                // justify-content: center;
                // align-items: center;
                flex-direction: column;
                margin-left: .5rem;
                .infoImgFlex{
                  display: flex;
                  .infoImgFlexText{
                    color: #00A59D;
                  }
                }
                .infoImgBtn{
                  width: 1rem;
                  height: .3rem;
                  border-radius: .1rem;
                  border: 1px solid #CBCBCB;
                  text-align: center;
                  line-height: .3rem;
                  margin-top: .2rem;
                }
                img{
                  width: .8rem;
                  height: .8rem;
                  border-radius: 50%;
                  margin-right: .2rem;
                }
              }
              .production{
                display: flex;
                overflow: hidden;
                // width: 8rem;
                width: 60%;
                img{
                  width: 22.5%;
                  height: 1.3rem;
                  margin-right: .2rem;
                }
              }
            }
            li{
              display: inline-block;
              margin-right: .2rem;
              margin-bottom: .2rem;
              box-shadow: 0 0 10px #ccc;
              width: 2.16rem;
              img{
                width: 2.16rem;
                height: 1.8rem;
                display: inline-block;
              }
              p{
                font-size: .2rem;
                font-weight: 500;
                color: #333;
                line-height: .28rem;
                padding: .05rem;
              }
            }
          }
        }
        .stylistInfoWorksList{
        }
        .stylistInfoAchievementList{
        }
        .stylistInfoCourseList{
          ul{
            li{
              h2{
                font-size: .2rem;
                font-weight: 500;
                color: #333;
                line-height: .28rem;
              }
              span{
                font-size: .14rem;
                font-weight: 500;
                color: #999;
                line-height: .22rem;
                display: block;
              }
              p{
                font-size: .2rem;
                font-weight: 500;
                color: #333;
                line-height: .28rem;
                padding: 0;
                vertical-align: middle;
                height: .3rem;
                sub{
                  display: inline-block;
                  font-size: .14rem;
                  font-weight: 500;
                  color: #999;
                  line-height: .22rem;
                  vertical-align: middle;
                  text-decoration: line-through;
                  padding-left: .1rem;
                }
                button{
                  line-height: .28rem;
                  vertical-align: middle;
                  border: none;
                  font-size: .14rem;
                  font-weight: 500;
                  color: #fff;
                  background-color: #15A29C;
                  text-align: center;
                  border-radius: .05rem;
                  border: 1px solid #15A29C;
                  outline: none;
                  padding: 0 .05rem;
                }
              }
            }
          }
        }
        .stylistInfoWorkRoom{
          padding: .4rem;
          .stylistInfoWorkRoomBox{
            p{
              font-size: .18rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
              text-indent: .6rem;
              span{
                font-size: .18rem;
                font-weight: bold;
                color: #333;
                line-height: .24rem;
              }
            }
          }
        }
        .stylistInfoPeopleList{
        }
        .stylistInfoBulletin{
          ul{
            padding: .2rem;
            margin-top: .2rem;
            background-color: #fff;
            li{
              font-size: 0;
              padding-bottom: .2rem;
              .newsListViewImg{
                width: 1rem;
                height: 1rem;
                display: inline-block;
                vertical-align: middle;
                text-align: center;
                h2{
                  font-size: .22rem;
                  font-weight: 500;
                  color: #333;
                  line-height: .3rem;
                  padding-top: .2rem;
                }
                span{
                  font-size: .14rem;
                  font-weight: 500;
                  color: #333;
                  line-height: .3rem;
                }
              }
              .newsListViewInfo{
                display: inline-block;
                width: calc(100% - 1rem);
                vertical-align: middle;
                padding-left: .2rem;
                position: relative;
                h2{
                  font-size: .18rem;
                  font-weight: 500;
                  color: #333;
                  line-height: .26rem;
                }
                p{
                  font-size: .14rem;
                  font-weight: 500;
                  color: #999;
                  line-height: .22rem;
                }
                img{
                  position: absolute;
                  right: .2rem;
                  top: 50%;
                  transform: translateY(-50%);
                  background-color: #fff;
                  opacity: .5;
                }
              }
              .newsListViewInfo2{
                border-left: 1px solid #ccc;
                h2{
                  line-height: .55rem;
                }
              }
            }
            li:last-child{
              padding-bottom: 0;
            }
          }
        }
        .stylistInfoEnterprise{
          padding: .2rem;
        }
        .stylistInfoRecruit{
          padding: .2rem;
        }
      }
      .stylistInfoSameRecommend{
        background-color: #fff;
        margin-top: .2rem;
        h2{
          font-size: .2rem;
          font-weight: 500;
          color: #333;
          line-height: .28rem;
          border-bottom: 1px solid #eee;
          padding: .1rem .2rem;
        }
        ul{
          // padding: .2rem;
          height: 1.98rem;
          // overflow: hidden;
          li:nth-child(6n) {
            margin-right: 0;
          }
          li{
            display: inline-block;
            margin-right: .16rem;
            margin-bottom: .16rem;
            box-shadow: 0 0 10px #ccc;
            width: 1.8rem;
            img{
              width: 1.8rem;
              height: 1.6rem;
              display: inline-block;
            }
            p{
              font-size: .2rem;
              font-weight: 500;
              color: #333;
              line-height: .28rem;
              padding: .05rem;
            }
          }
        }
      }
    }
  }
}}
</style>
